import logo from '@/assets/img/logo.png';
import { UserLoginFnc } from '@/services/login';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { useModel, useNavigate } from '@umijs/max';
import { message } from 'antd';
import style from './index.less';

const Login = () => {
  const { saveToken } = useModel('tokenModel');
  const navigate = useNavigate();

  // 提交表单
  const onFinish = async (info: { username: string; password: string }) => {
    const res = await UserLoginFnc({
      username: info.username,
      password: info.password,
    });
    if (res.meta.status === 200) {
      message.open({
        type: 'success',
        content: '登录成功',
        onClose: () => {
          navigate('/A/users');
          saveToken(res.data.token);
        },
      });
    }
  };

  return (
    <div className={style.loginBox}>
      <div className={style.container}>
        {/* logo区域 */}
        <div className={style.logo}>
          <img src={logo} alt="" />
        </div>

        {/* 表单区域 */}
        <div className={style.loginForm}>
          <LoginForm onFinish={onFinish}>
            <ProFormText
              name="username"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={'prefixIcon'} />,
              }}
              rules={[{ required: true, message: '请输入用户名!' }]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={'prefixIcon'} />,
              }}
              rules={[{ required: true, message: '请输入密码！' }]}
            />
          </LoginForm>
        </div>
      </div>
    </div>
  );
};

export default Login;
